@barHeight: 45px;

.wrapper {
    display        : flex;
    height         : 100%;
    flex           : 1;
    background     : #FFFFFF;
    flex-direction : row;
    justify-content: space-between
}


.leftSider {
    height      : 100%;
    z-index     : 500;
    width       : 220px;
    border-right: 1px solid #e5e5e5;
    box-shadow  : 0 0 10px rgba(33, 33, 33, .15);
}

.mapWrapper {
    height        : 100%;
    z-index       : 499;
    flex          : 1;
    display       : flex;
    flex-direction: column;
}


ul {
    margin    : 0;
    padding   : 0;
    list-style: none;
}

.toolsBar {
    height         : @barHeight;
    line-height    : @barHeight;
    border-bottom  : 1px solid #f0f0f0;
    padding-left   : 20px;
    display        : flex;
    flex-direction : row;
    justify-content: space-between;
    align-items    : center;
    box-shadow     : 0 0 10px rgba(33, 33, 33, 0.15);
    z-index        : 1000;

    ul {

        li {
            display   : inline;
            margin    : auto 10px;
            cursor    : pointer;
            transition: all .3s;

            &:hover,
            &.active {
                color: #1890ff;
            }
        }
    }

    .toolsIcon {
        // font-size: 22px;
        margin-right: 5px;
    }
}

.pullLeft {
    float: left;
}

.pullRight {
    float: right;
}

.map {
    position        : relative;
    flex            : 1;
    background-image: url('');
}

@traceWidth: 550px;

.traceList {
    position   : absolute;
    top        : 0;
    right      : -@traceWidth;
    width      : @traceWidth;
    bottom     : 0;
    border-left: 1px solid rgba(33, 33, 33, .15);
    background : rgba(255, 255, 255, 1);
    transition : all .3s;

    &.expand {
        right: 0
    }
}

.mapTools {
    position       : absolute;
    padding        : 16px;
    width          : 560px;
    margin-left    : -280px;
    left           : 50%;
    bottom         : 10px;
    background     : rgba(255, 255, 255, 1);
    z-index        : 1001;
    box-shadow     : 0 0 10px rgba(33, 33, 33, 0.25);
    display        : flex;
    flex-direction : row;
    align-items    : center;
    justify-content: flex-start;


    ul {
        list-style  : none;
        margin-right: 16px;

        li {
            display: inline-block;
            margin : 0 5px;
        }
    }

    .traceSpeed {
        flex           : 1;
        flex-direction : row;
        display        : flex;
        justify-content: space-between;
        align-items    : center;

        .traceLabel {
            padding-right: 10px;
        }

        .traceBar {
            flex: 1
        }
    }
}

@overlayColor: #114d8f;

.avatarOverlay {
    width          : 130px;
    height         : 50px;
    position       : relative;
    border-radius  : 25px;
    background     : @overlayColor;
    display        : flex;
    flex-direction : row;
    justify-content: flex-start;

    &:after {
        position    : absolute;
        content     : ' ';
        width       : 0;
        height      : 0;
        bottom      : -12px;
        left        : 50%;
        margin-left : -12px;
        border-left : 10px solid transparent;
        border-right: 10px solid transparent;
        border-top  : 12px solid @overlayColor;
    }

    .content {
        padding-left   : 5px;
        color          : #F8F8F8;
        transition     : all .3s;
        display        : flex;
        flex-direction : column;
        justify-content: center;
        overflow       : hidden;
        text-overflow  : ellipsis;
        white-space    : nowrap;

        .name {
            font-weight: bold;
            font-size  : 1.1em;
        }

        .policeNo {
            color: #F0F0F0;
        }
    }

    img {
        width        : 50px;
        height       : 50px;
        border-radius: 25px;
        border       : 2px solid @overlayColor;
    }
}